<script setup lang="ts">
const props = defineProps({
  modelValue: Boolean,
  disabled: { type: Boolean, default: false }
})

const emit = defineEmits<{
  (e: 'update:modelValue', value): void
}>()

const toggle = () => {
  emit('update:modelValue', !props.modelValue)
}
</script>

<template>
  <button :disabled="disabled" :class="{ checked: modelValue }" class="gulu-switch" @click="toggle"><span></span></button>
</template>

<style lang="scss">
$h: 22px;
$h2: $h - 4px;
.gulu-switch {
  position: relative;
  display: inline-block;
  width: $h * 2;
  height: $h;
  line-height: $h;
  vertical-align: middle;
  border: none;
  margin-bottom: 8px;
  background-color: #bfbfbf;
  border-radius: 11px;
  outline: none;
  cursor: pointer;
  transition: all 0.25s;
  &[disabled] {
    pointer-events: none;
  }
  &:focus {
    box-shadow: 0 0 5px rgba(191, 191, 191, 0.5);
    &:hover {
      box-shadow: none;
    }
  }
  > span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: $h2;
    height: $h2;
    border: none;
    border-radius: 11px;
    background-color: #fff;
  }
  &:active {
    box-shadow: none;
    > span {
      width: $h + 2px;
    }
  }
  &.checked {
    background-color: #1890ff;
    > span {
      left: calc(100% - #{$h2} - 2px);
    }
    &:focus {
      box-shadow: 0 0 5px rgba(24, 144, 255, 0.5);
      &:hover {
        box-shadow: none;
      }
    }
    &:active {
      box-shadow: none;
      > span {
        width: $h + 2px;
        margin-left: -6px;
      }
    }
  }
}
</style>
